<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侦听器</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.监听器学习 -->
			姓:<input type="text" v-model.lazy="firstName" /><br>
			名称:<input type="text" v-model.lazy="lastName" />
			全名:{{fullName}}<br>

			<!-- 过滤器 如果对数据的格式进行修改 小写转大写 日期格式转换... -->
			用户名:<input type="text" v-model="userName" />
			{{userName | upper | lower}}

		</div>
		<script src="../js/vue.js"></script>
		<script>
			//1.定义过滤器
			Vue.filter("upper", function(value) {
				return value.toUpperCase()
			})
			//2.箭头函数的用法 全部小写	注意事项:如果没有参数()不能省略
			Vue.filter("lower", (value) => {
				return value.toLowerCase()
			})



			const app = new Vue({
				el: "#app",
				data: {
					firstName: '',
					lastName: '',
					fullName: '',
					userName: ''
				},
				methods: {

				},
				//定义监听器
				watch: {
					//放数据发生变化时则会传递数据到监听器中
					firstName(value) {
						this.fullName = value + this.lastName
					},
					lastName(value) {
						this.fullName = this.firstName + value
					}
				}
			})
		</script>
	</body>
</html>
